<template>
    <div class="house-wrap">
        <div class="box-common">
            <div class="box-body">
                <div class="box-value">确认营业收入(权责)(万元)</div>
                <div class="box-name">{{ operationData.confirIncomeWy }}</div>
            </div>
            <div class="box-body">
                <div class="box-value">在租合同均价(元/间/月)</div>
                <div class="box-name">{{ operationData.avgRentPrice }}</div>
            </div>
            <div class="box-body">
                <div class="box-value">成交坪效(元/天/㎡)</div>
                <div class="box-name">{{ operationData.perSquareIncome }}</div>
            </div>
            <div class="box-body">
                <div class="box-value">平均租期(月)</div>
                <div class="box-name">{{ operationData.avgRentDate }}</div>
            </div>
        </div>
        <div class="box-common">
            <div class="box-body">
                <div class="box-value">时点出租率</div>
                <div class="box-name">{{ operationData2.tPointRentalRate }}</div>
            </div>
            <div class="box-body">
                <div class="box-value">间天出租率</div>
                <div class="box-name">{{ operationData2.interdayRentalRate }}</div>
            </div>
            <div class="box-body">
                <div class="box-value">续租率</div>
                <div class="box-name">{{ operationData2.renewalRate }}</div>
            </div>
            <div class="box-body">
                <div class="box-value">空置房间(间)</div>
                <div class="box-name">{{ operationData2.vacantRooms }}</div>
            </div>
            <div class="box-body">
                <div class="box-value">平均空置天数(天)</div>
                <div class="box-name">{{ operationData2.avgVacantDays }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getStoreAvgData1, getStoreAvgData2 } from '@/api/DashBoardApi';
export default {
    data() {
        return {
            operationData: {},
            operationData2: {}
        };
    },
    mounted() {
        this.getHouseData1({});
        this.getHouseData2({});
    },
    methods: {
        getHouseData1(parms) {
            this.loading = true;
            getStoreAvgData1(parms)
                .then((res) => {
                    if (res && res.obj) {
                        console.log(res.obj);
                        this.operationData = res.obj;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        },
        getHouseData2(parms) {
            this.loading = true;
            getStoreAvgData2(parms)
                .then((res) => {
                    if (res && res.obj) {
                        res.obj.tPointRentalRate = parseFloat((res.obj.tPointRentalRate*100).toFixed(2)) +'%';
                        res.obj.interdayRentalRate = parseFloat((res.obj.interdayRentalRate*100).toFixed(2)) +'%';
                        res.obj.renewalRate = parseFloat((res.obj.renewalRate*100).toFixed(2)) +'%';
                        this.operationData2 = res.obj;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        }
    }
};
</script>

<style lang="scss" scoped>
.house-wrap {
    background: url('/static/icon/icon_bg_01.png') no-repeat;
    background-size: 140px 140px;
    background-position: right -12px;
    .box-common {
        position: relative;
        display: flex;
        align-items: center;
        padding: 28px 0 16px 0;
        .box-body {
            position: relative;
            width: 100%;
            .box-value {
                position: relative;
                color: #1d252f;
                font-size: 14px;
                font-weight: 500;
                line-height: 20px;
            }
            .box-name {
                position: relative;
                color: #1d2129;
                font-size: 18px;
                font-weight: bold;
                margin-top: 10px;
            }
        }
    }
}
</style>
